<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid;
      }
    </style>
  </head>

  <body>
    <canvas class="box" width="500" height="500"></canvas>
    <script>
      // let imgArr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-11-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666572977&t=d781f2d7b9a41c33bfc07b26281d12f4", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp02%2F1Z9191923035R0-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666572977&t=7c195738b014f00c79e03fbdf8f888c3", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1806%2F27%2Fc13%2F94696428_1530079746836_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666572977&t=60378f0c25f3932e9778858d523507ac"]; // 存放图片的地址，给图片做预加载，提前把图片加载完毕，之后再使用

      let imgObj = {
        img1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-11-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666572977&t=d781f2d7b9a41c33bfc07b26281d12f4",
        img2: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp02%2F1Z9191923035R0-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666572977&t=7c195738b014f00c79e03fbdf8f888c3",
        img3: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1806%2F27%2Fc13%2F94696428_1530079746836_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666572977&t=60378f0c25f3932e9778858d523507ac",
      };

      function loadImg(imgObj) {
        return new Promise((resolve, reject) => {
          let count = 0;
          let resObj = {};
          for (let key in imgObj) {
            let imgEle = new Image();
            imgEle.src = imgObj[key];
            imgEle.onload = function () {
              resObj[key] = this;
              count++;
              if (count == Object.keys(imgObj).length) {
                resolve(resObj);
              }
            };
          }
        });
      }

      let canvas = document.querySelector(".box");
      let ctx = canvas.getContext("2d");
      // 给三张图做预加载。
      loadImg(imgObj).then((res) => {
        ctx.drawImage(res.img1, 0, 0, 100, 100);
        ctx.drawImage(res.img2, 150, 0, 100, 100);
        ctx.drawImage(res.img3, 300, 0, 100, 100);
      });
    </script>
  </body>
</html>
